<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>DPlayer 播放器</title>
    <script src="/js/hls.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/dplayer/1.26.0/DPlayer.min.js"></script>
    <style>
      #dplayer {
        width: 800px;
        height: 450px;
      }
    </style>
  </head>
  <body>
    <h1>DPlayer 播放器</h1>
    <div id="dplayer"></div>

    <script>
      const playlistUrl = "/adaptive/stream_640_360/index.m3u8"
      // const playlistUrl = "/adaptive/stream_854_480/index.m3u8"
      // const playlistUrl = "/adaptive/stream_1280_720/index.m3u8"
      const video = document.getElementById("video")
      const dp = new DPlayer({
        logo: "/favicon.ico",
        lang: "zh-cn",
        container: document.getElementById("dplayer"),
        video: {
          defaultQuality: 0,
          quality: [
            {
              name: "360p",
              url: "/adaptive/input1/stream_640_360/index.m3u8",
              type: "hls"
            },
            {
              name: "480p",
              url: "/adaptive/input1/stream_854_480/index.m3u8",
              type: "hls"
            },
            {
              name: "720p",
              url: "/adaptive/input1/stream_1280_720/index.m3u8",
              type: "hls"
            }
          ]
        },
        highlight: [
          {
            time: 20,
            text: "这是第 20 秒"
          },
          {
            time: 120,
            text: "这是 2 分钟"
          }
        ],
        pluginOptions: {
          hls: {}
        }
      })
    </script>
  </body>
</html>
